<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
<div id="talentGrid"></div>  <!-- 注意命名方式 -->
<div id="talentToolbar">
	<div>
		<a href="#" class="easyui-linkbutton" onclick="talent.toolbar.showAddDialog();" data-options="
		iconCls:'icon-add',
		plain:true">
			新增
		</a>
		<a href="#" class="easyui-linkbutton" onclick="talent.toolbar.showUpdateDialog();" data-options="
		iconCls:'icon-edit',
		plain:true">
			修改
		</a>
		<a href="#" class="easyui-linkbutton" onclick="talent.toolbar.remove();" data-options="
		iconCls:'icon-remove',
		plain:true">
			删除
		</a>
		<a href="#" class="easyui-linkbutton" onclick="talent.toolbar.redo();" data-options="
		iconCls:'icon-redo',
		plain:true">
			取消
		</a>
	</div>
	<div>
		<strong>姓名：</strong>
		<input type="text" name="name" id="searchName"/>
		<strong>时间：</strong>
		<input type="text" name="time" id="searchTime" class="easyui-datetimebox"/>
		<a href="#" onclick="talent.toolbar.search();" class="easyui-linkbutton" data-options="
		iconCls:'icon-search',
		plain:true">
			查询
		</a>
	</div>
</div>

<div id="talentAddDialog" class="easyui-dialog talent-add" data-options="
title:'新增用户',
buttons:'#talentAddButtons',
closed: true,
onClose:talent.toolbar.resetAddFrom">			//点击弹出框中的差号时
	<form id="talentAddForm" method="post">
		<p>
			<strong>帐号：</strong>
			<input type="text" name="code" id="code" class="easyui-validatebox" data-options="
			required:true">
		</p>
		<p>
			<strong>密码：</strong>
			<input type="password" name="password" class="easyui-validatebox" data-options="
			required:true">
		</p>
		<p>
			<strong>姓名：</strong>
			<input type="text" name="name" class="easyui-validatebox" data-options="
			required:true">
		</p>
		<p>
			<strong>电话：</strong>
			<input type="text" name="phone" class="easyui-validatebox" data-options="
			required:true">
		</p>
		<p>
			<strong>邮箱：</strong>
			<input type="text" name="email" class="easyui-validatebox" data-options="
			required:true">
		</p>
		<p>
			<strong>年龄：</strong>
			<input type="text" name="age" id="age" class="easyui-numberspinner" data-options="
			min: 18,
			max: 60,
			editable: false">
		</p>
		<p>
			<strong>性别：</strong>
			<select class="easyui-combobox" name="gender" id="gender">
			    <option value="1">男</option>
			    <option value="2">女</option>
			</select>
		</p>
		<p>
			<strong>菜单：</strong>
			<input type="text" id="menu">
		</p>
	</form>
</div>
<div id="talentAddButtons">
	<a href="#" onclick="talent.toolbar.add()" class="easyui-linkbutton" data-options="
	iconCls: 'icon-add',
	plain: true">
		新增
	</a>
	<a href="#" onclick="talent.toolbar.hiddenAddDialog();" class="easyui-linkbutton" data-options="
	iconCls: 'icon-redo',
	plain: true">
		取消
	</a>
</div>

<div id="talentUpdateDialog" class="easyui-dialog talent-add" data-options="
title: '新增用户',
buttons: '#talentUpdateButtons',
closed: true,
onClose: talent.toolbar.resetUpdateFrom">
	<form id="talentUpdateForm" method="post">
		<input type="hidden" name="id"/>
		<p>
			<strong>帐号：</strong>
			<input type="text" name="code" readonly="readonly" class="easyui-validatebox" data-options="
			required: true">
		</p>
		<p>
			<strong>姓名：</strong>
			<input type="text" name="name" class="easyui-validatebox" data-options="
			required: true">
		</p>
		<p>
			<strong>电话：</strong>
			<input type="text" name="phone" class="easyui-validatebox" data-options="
			required: true">
		</p>
		<p>
			<strong>邮箱：</strong>
			<input type="text" name="email" class="easyui-validatebox" data-options="
			required: true">
		</p>
		<p>
			<strong>年龄：</strong>
			<input type="text" name="age" class="easyui-numberspinner" data-options="
			min: 18,
			max: 60,
			editable: false">
		</p>
		<p>
			<strong>性别：</strong>
			<select name="gender" class="easyui-combobox">
			    <option value="1">男</option>
			    <option value="2">女</option>
			</select>
		</p>
		<p>
			<strong>菜单：</strong>
			<input type="text" id="menuUpdate">
		</p>
	</form>
</div>
<div id="talentUpdateButtons">
	<a href="#" onclick="talent.toolbar.update()" class="easyui-linkbutton" data-options="
	iconCls: 'icon-edit',
	plain: true">
		修改
	</a>
	<a href="#" onclick="talent.toolbar.hiddenUpdateDialog();" class="easyui-linkbutton" data-options="
	iconCls: 'icon-redo',
	plain: true">
		取消
	</a>
</div>

<script>	
	var talent = {
		init : function() {
			talent.talentGrid = $('#talentGrid');    
			talent.menu = $('#menu');
			talent.talentAddDialog = $('#talentAddDialog');
			talent.code = $('#code');
			talent.age = $('#age');
			talent.talentAddForm = $('#talentAddForm');
			talent.talentUpdateForm = $('#talentUpdateForm');
			talent.menuUpdate = $('#menuUpdate');
			talent.talentUpdateDialog = $('#talentUpdateDialog');
			talent.talentSearchName = $('#searchName')
			
			/* 增删改查都是基于datagrid组件做的 */
			talent.talentGrid.datagrid({
			    url: '<%=request.getContextPath()%>/TestServlet?command=listTalent',
			    fixed: false,
			    fitColumns: true,    //把每个列平均去分，然后铺满
			    striped: true,		//奇偶行换色
			    rownumbers: true,   //行号
			    pagination: true,	//是否支持分页
			    pageSize: 20,		//每页显示的条数
			    pageList: [10, 20, 30, 40, 500],		//每页显示条数的选项
			    pageNumber: 1,		//默认显示页数
			    sortName: 'age',	//做排序的对象
			    sortOrder: 'desc',
			    toolbar: '#talentToolbar',
			    columns:[[					//这里是跟json匹配的
					{field:'id', checkbox: true},
					{field:'name', title:'姓名', width:100, align:'center'},
					{field:'age', title:'年龄', width:50, align:'center', sortable: true},
					{field:'phone', title:'电话', width:100, align:'center'},
					{field:'email', title:'邮箱', width:100, align:'center'},
					{field:'operate', title: '操作', formatter: talent.row.showGender, align:'center'} 
			    ]],
				onDblClickRow: function(rowIndex, rowData) {
					talent.toolbar.showUpdateDialog(rowData.id);
				}
			});
		},
		toolbar: {
			showCombotree: function() {
				talent.menu.combotree({
					url: '<%=request.getContextPath()%>/TestServlet?command=listMenu',
					lines: true,
					multiple: true,
					checkbox: true,
					onlyLeafCheck: true,
					onLoadSuccess: function(node, data) {
						$(this).tree('expandAll')
					}
				});
			},
			showAddDialog: function() {
				talent.toolbar.showCombotree();
				talent.talentAddDialog.dialog('open');
				talent.code.focus();
				// 坑，只能使用id选择器，上面记得隐藏id，这里做年龄微调
				talent.age.numberspinner('setValue', 20);
			},
			hiddenAddDialog: function() {					//点击取消时，最好不要用clear
				talent.talentAddDialog.dialog('close');
				talent.toolbar.resetAddForm();
			},
			resetAddForm: function() {						//表单提交完以后清空表单中的数据
				talent.talentAddForm.form('reset');
			},
			add: function() {
				if (talent.talentAddForm.form('validate')) {    //新增是先要做表单验证
					$.messager.progress({
						text : '正在处理...'
					});
				//jquery中的serialize方法可以把表单中的请求拼装成地址栏需要的方式，很方便
					$.post('<%=request.getContextPath()%>/TestServlet?command=addTalent', talent.talentAddForm.serialize(), function(data) {
						if (data) {
							$.messager.show({
								title: '系统提示',
								msg: '新增成功！',
								timeout: 3000,
								showType: 'slide'
							});
							talent.toolbar.resetAddFrom();
							talent.talentGrid.datagrid('reload');			//新增数据后舒心列表
						} else {
							$.messager.alert('系统提示', '新增失败！', 'error')
						}
						$.messager.progress('close');
						talent.toolbar.hiddenAddDialog();
					});
				}
			},
			showUpdateDialog: function(id) {
				talent.toolbar.showCombotree();
				var getData = function(v) {
					$.messager.progress({
						text : '正在处理...'
					});
					$.post('<%=request.getContextPath()%>/TestServlet?command=getTalent', {id : v}, function(data) {
						if (data) {
							talent.talentUpdateForm.form('load', {		//表单中的load可以加载数据
								id: data.id,
								code: data.code,
								name: data.name,
								phone: data.phone,
								email: data.email,
								age: data.age,
								gender: data.gender
							});
							
							// 测试默认选中管理员管理,求职者管理，这里为下拉菜单中的树
							var checkedItems = '管理员管理,求职者管理'.split(',');
							<%-- talent.menuUpdate.combotree({							//在下拉选择中显示tree
								url: '<%=request.getContextPath()%>/TestServlet?command=listMenu',
								lines: true,
								multiple: true,
								checkbox: true,
								onlyLeafCheck: true,
								onLoadSuccess: function(node, data) {
									var that = this;
									$(that).tree('expandAll');
									if (data) {
										$(data).each(function(index, value) {
											if ($.inArray(value.text, checkedItems) != -1) {
												$(that).tree('check', value.target);
											}
										});
									}
								}
							}); --%>
							talent.talentUpdateDialog.dialog('open');
						} else {
							$.messager.alert('系统提示', '获取信息失败！', 'error')
						}
						$.messager.progress('close');
					}, 'json');
				}
				if (id) {
					getData(id);		//使用js中的方法的重载
				} else {
					var row = talent.talentGrid.datagrid('getSelections');		//选择所有的行
					if (row.length == 1) {
						getData(row[0].id);
					} else {
						$.messager.show({
							title: '系统提示',
							msg: '请选择一行数据进行修改！',
							timeout: 3000,
							showType: 'slide'
						});	
					}
				}
			},
			hiddenUpdateDialog: function() {
				talent.talentUpdateDialog.dialog('close');
				talent.toolbar.resetUpdateFrom();
			},
			resetUpdateFrom: function() {
				talent.talentUpdateForm.form('reset');
			},
			update: function() {
				if (talent.talentUpdateForm.form('validate')) {
					$.messager.progress({
						text : '正在处理...'
					});
					$.post('<%=request.getContextPath()%>/TestServlet?command=updateTalent', $("#talentUpdateForm").serialize(), function(data) {
						if (data == 1) {
							$.messager.show({
								title: '系统提示',
								msg: '修改成功！',
								timeout: 3000,
								showType: 'slide'
							});
							talent.toolbar.resetUpdateFrom();
							talent.talentGrid.datagrid('reload');
						} else {
							$.messager.alert('系统提示', '修改失败！', 'error');
						}
						$.messager.progress('close');
						talent.toolbar.hiddenUpdateDialog();
					});
				}
			},
			remove: function() {
				var row = talent.talentGrid.datagrid('getSelections');
				if (row.length > 0) {
					var ids = [];
					$.each(row, function(i, v) {
						ids.push(v.id);
					});
					$.post('<%=request.getContextPath()%>/TestServlet?command=deleteTalent', {ids: ids.join(',')}, function(data) {
						if (data == 1) {
							$.messager.show({
								title: '系统提示',
								msg: '删除成功！',
								timeout: 3000,
								showType: 'slide'
							});
							talent.talentGrid.datagrid('reload');
						} else {
							$.messager.alert('系统提示', '删除失败！', 'error')
						}
						$.messager.progress('close');
					});
				} else {
					$.messager.show({
						title: '系统提示',
						msg: '请选择数据进行删除！',
						timeout: 3000,
						showType: 'slide'
					});	
				}
			},
			redo: function() {						//点击取消时执行的方法
				talent.talentGrid.datagrid('unselectAll');		//unselectAll内置方法
			},
			search: function() {
				talent.talentGrid.datagrid('load', {
					name: talent.talentSearchName.val()
				});
			}
		},
		row : {
			showGender: function(value, row, index) {
				var id = row.id;
				var gender = row.gender;
				if (!value) {
					value = gender == 1 ? '男' : '女';
				}
				var operations = [];
				operations.push('<a href="javascript:void(0)" onclick="talent.row.updateGender(\'' + id + '\',  \'' + value + '\',  \'' + index + '\')">' + value + '</a>');
				return operations.join('');
			},
			updateGender: function(id, value, index) {
				$.messager.confirm('Confirm', 'Are you sure to update this item?', function(result){
					if (result){
						$.messager.show({
							title: '系统提示',
							msg: '性别修改成功！',
							timeout: 3000,
							showType: 'slide'
						});
 						talent.talentGrid.datagrid('updateRow', {
							index: index,
							row: {
								operate: value == '男' ? '女' : '男'
							}
						}); 
					} else {
						$.messager.alert('系统提示', '性别修改失败！', 'error')
					}
				});
			}
		}
	};
	
	$(function(){
		talent.init();
	});
</script>
